<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>

 <body>
    <!--
        收集表单数据:
            若: <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
            若: <input -type="radio" />，则v-model收集的是value值，且要给标签配置value值。
            若:<input type="checkbox" />
                1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
                2.配置input的value属性:
                    (1)v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
                    (2)v-model的初始值是数组，那么收集的的就是value组成的数组
            备注:v-model的三个修饰符:
                lazy:失去焦点再收集数据
                number:输入字符串转为有效的数字trim:输入首尾空格过滤 
    -->

    <div id="app">
        <form @submit.prevent="demo">
            <!-- v-model.trim：去除空格 -->
            账号：<input type="text" v-model.trim="account"/><br/><br/>
            密码：<input type="text" v-model="password"/><br/><br/>
            <!-- v-model.number：v-model的修饰符 -->
            年龄：<input type="number" v-model.number="age"/><br/><br/>
            性别：
            男：<input type="radio" name="sex" v-model="sex" value="male">
            女：<input type="radio" name="sex"v-model="sex" value="female"><br/><br/>
            爱好：
            篮球<input type="checkbox" v-model="hobby" value="lanqiu"/>
            音乐<input type="checkbox" v-model="hobby" value="music"/>
            编程<input type="checkbox" v-model="hobby" value="program"/>
            <br/><br/>
            所属校区：
            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br/><br/>
            其他信息：
            <!-- v-model.lazy：修饰符懒加载开启 -->
            <textarea v-model.lazy="other"></textarea>
            <br/><br/>
            <input type="checkbox" v-model="agree"/>阅读并接收<a href="http://www.atguigu.com/">《用户协议》</a><br/><br/>
            <button>提交</button>
        </form>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               account: '',
               password: '',
               age: 18,
               sex: 'male',
               hobby: [],
               city: 'beijing',
               other: '',
               agree: ''
           },
           methods:{
               demo(){
                   console.log(JSON.stringify(this._data));// 将对象类型数据装换成JSON格式数据
               }
           }
        });
    </script>
</body>

</html>